<template>
    <div>
        <a-modal v-model="updatePwdVisible" title="修改密码" ok-text="提交" cancel-text="取消"
                 @ok="submitUpdatePwd('updatePwdForm')" @cancel="closeUpdatePwdModel">
            <a-form-model
                    style="text-align: center"
                    ref="updatePwdForm"
                    :rules="updatePwdRules"
                    :model="updatePwdData"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
            >
                <a-form-model-item hasFeedback class="form-item" label="原始密码" prop="rawPwd">
                    <a-input-password v-model="updatePwdData.rawPwd" style="width: 220px"/>
                </a-form-model-item>
                <a-form-model-item hasFeedback class="form-item" label="新密码" prop="newPwd">
                    <a-input-password v-model="updatePwdData.newPwd" style="width: 220px"/>
                </a-form-model-item>
                <a-form-model-item hasFeedback class="form-item" label="确认密码" prop="checkPwd">
                    <a-input-password v-model="updatePwdData.checkPwd" style="width: 220px"/>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
    import verifyApi from "../../../api/user/account/verifyApi";

    export default {
        props: {
            updatePwdVisible: Boolean
        },
        name: "updatePwdModel",
        data() {
            let validateRawPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入原始密码'));
                }
                console.log(value)
            };
            let validateNewPwd = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else {
                    /*if (this.updatePwdData.checkPwd !== '') {
                        this.$refs.updatePwdForm.validateField('checkPwd');
                    }*/
                    callback();
                }
                console.log(value)

            };
            let validateNewPwdCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入确认密码'));
                } else if (value !== this.updatePwdData.newPwd) {
                    callback(new Error("两次输入密码不一致"));
                } else {
                    callback();
                }
                console.log(value)

            };
            return {
                labelCol: {span: 8},
                wrapperCol: {span: 8},
                updatePwdData: {
                    rawPwd: "",
                    newPwd: "",
                    checkPwd: ""
                },
                updatePwdRules: {
                    rawPwd: [{validator: validateRawPwd, trigger: 'change'}],
                    newPwd: [{validator: validateNewPwd, trigger: 'change'}],
                    checkPwd: [{validator: validateNewPwdCheck, trigger: 'change'}],
                },
            }
        },
        methods: {
            /**
             * 提交修改密码
             */
            submitUpdatePwd(formName) {
                console.log(this.updatePwdData)

                this.$refs[formName].validate()

                verifyApi.updatePwd(this.updatePwdData.rawPwd, this.updatePwdData.newPwd).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message)
                        this.$store
                            .dispatch("Logout")
                            .then(resp => {
                                console.log("log", resp);
                                if (resp.flag) {
                                    this.$message.success("请重新登录", 1)
                                    //清除菜单信息
                                    this.$store.commit("INIT_ROUTES", []);
                                    this.$router.push("/login");
                                } else {
                                    this.$message.warning(resp.data.message, 2);
                                }
                            })
                            .catch(error => {
                                this.$message.warning("退出错误", 2);
                            });
                    }
                })


            },
            closeUpdatePwdModel() {
                this.$emit("closeUpdatePwdForm")
            }
        }
    }
</script>

<style scoped>

</style>